<script setup>
import { ref, toRefs, defineExpose } from "vue";
import { useDrawerStore } from "@/store/drawerDataStores.js";
import { message } from "@/utils/message";

const baudRateList = ref([
  {
    value: "4800",
    label: "4800"
  },
  {
    value: "9600",
    label: "9600"
  },
  {
    value: "14400",
    label: "14400"
  },
  {
    value: "19200",
    label: "19200"
  },
  {
    value: "38400",
    label: "38400"
  },
  {
    value: "56000",
    label: "56000"
  },
  {
    value: "57600",
    label: "57600"
  },
  {
    value: "115200",
    label: "115200"
  },
  {
    value: "128000",
    label: "128000"
  },
  {
    value: "230400",
    label: "230400"
  },
  {
    value: "256000",
    label: "256000"
  }
]);
const drawerStore = useDrawerStore();
const props = defineProps({
  devVarTableSelectedItem: {
    type: Object,
    default() {
      return {};
    }
  },
  publicForm: {
    type: Object,
    default() {
      return {};
    }
  }
});
const { devVarTableSelectedItem, publicForm } = toRefs(props);
const emit = defineEmits(["childFormObj"]);

const ruleFormPlcRef = ref(),
  ruleFormPlc = ref({
    baudRate: "9600", // 波特率
    dataBit: "8", //数据位
    stopBit: "1", //停止位
    verify: "NONE" //校验
  });

// 配置按钮
const configClick = () => {
  if (
    ruleFormPlc.value.baudRate &&
    ruleFormPlc.value.dataBit &&
    ruleFormPlc.value.stopBit &&
    ruleFormPlc.value.verify
  ) {
    let MQTTObj = {
      baud_rate: ruleFormPlc.value.baudRate,
      data_bits: ruleFormPlc.value.dataBit,
      stop_bits: ruleFormPlc.value.stopBit,
      parity: ruleFormPlc.value.verify
    };
    let SQLObj = {
      ...ruleFormPlc.value
    };

    let formObj = {
      MQTTObj: MQTTObj,
      SQLObj: SQLObj
    };

    emit("childFormObj", formObj);
  } else {
    message("请填写所有的数据", { type: "warning" });
  }
};
// 父组件调用清空函数
const clearVar = () => {
  const storeFormPlc = { ...drawerStore.ruleFormPlc };
  const storeFormLeft = { ...drawerStore.ruleFormLeft };
  const storeRTUForm = { ...drawerStore.RTUForm };
  ruleFormPlcRef.value.resetFields();
  ruleFormLeftRef.value.resetFields();
  ruleFormRef.value.resetFields();
  drawerStore.ruleFormPlc = { ...storeFormPlc };
  drawerStore.ruleFormLeft = { ...storeFormLeft };
  drawerStore.RTUForm = { ...storeRTUForm };
  tableData.value = [];
};
// 父组件调用保存函数
const saveStore = () => {
  drawerStore.ruleFormPlc = { ...ruleFormPlc.value };
  drawerStore.ruleFormLeft = { ...ruleFormLeft.value };
  drawerStore.RTUForm = { ...ruleForm.value };
  drawerStore.tableData = tableData.value;
};
// 父组件调用赋值函数
const copyStore = () => {
  if (devVarTableSelectedItem.value.state === 1) {
    ruleFormPlc.value = {
      baudRate: devVarTableSelectedItem.value.baudRate,
      dataBit: devVarTableSelectedItem.value.dataBit,
      stopBit: devVarTableSelectedItem.value.stopBit,
      verify: devVarTableSelectedItem.value.verify
    };
    ruleFormLeft.value.passiveAddress =
      devVarTableSelectedItem.value.passiveAddress;
    ruleForm.value = {
      protocolType: devVarTableSelectedItem.value.protocolType,
      protocolAddress: devVarTableSelectedItem.value.protocolAddress,
      protocolNumber: devVarTableSelectedItem.value.protocolNumber
    };
    tableData.value = [
      {
        protocolType: devVarTableSelectedItem.value.protocolType,
        protocolAddress: devVarTableSelectedItem.value.protocolAddress,
        protocolNumber: devVarTableSelectedItem.value.protocolNumber
      }
    ];
  } else {
    ruleFormPlc.value = drawerStore.ruleFormPlc;
    ruleFormLeft.value = drawerStore.ruleFormLeft;
    tableData.value = drawerStore.tableData;
    ruleForm.value = drawerStore.RTUForm;
  }
};
defineExpose({
  clearVar,
  saveStore,
  copyStore
});
</script>

<template>
  <div class="form-main">
    <el-form
      ref="ruleFormPlcRef"
      :model="ruleFormPlc"
      :inline="true"
      label-position="top"
    >
      <el-form-item
        label="波特率"
        prop="baudRate"
        style="width: 115px; margin-right: 20px"
      >
        <el-select v-model="ruleFormPlc.baudRate" placeholder="请选择波特率">
          <el-option
            v-for="item in baudRateList"
            :key="item"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="数据位"
        prop="dataBit"
        style="width: 115px; margin-right: 20px"
      >
        <el-select v-model="ruleFormPlc.dataBit" placeholder="请选择数据位">
          <el-option label="5" value="5" />
          <el-option label="6" value="6" />
          <el-option label="7" value="7" />
          <el-option label="8" value="8" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="停止位"
        prop="stopBit"
        style="width: 115px; margin-right: 20px"
      >
        <el-select v-model="ruleFormPlc.stopBit" placeholder="请选择停止位">
          <el-option label="1" value="1" />
          <el-option label="1.5" value="1.5" />
          <el-option label="2" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item
        label="校验位"
        prop="verify"
        style="width: 115px; margin-right: 0px"
      >
        <el-select v-model="ruleFormPlc.verify" placeholder="请选择校验位">
          <el-option label="None" value="None" />
          <el-option label="Odd" value="Odd" />
          <el-option label="Even" value="Even" />
          <el-option label="Mark" value="Mark" />
          <el-option label="Space" value="Space" />
        </el-select>
      </el-form-item>
    </el-form>

    <div class="config-btn">
      <el-button type="primary" @click="configClick">配置</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.form-btn {
  margin-top: 30px;
}

.form-table {
  padding-bottom: 20px;
}

.config-btn {
  text-align: right;
}
</style>
